import SwiftUI

// RegisterInput
// 注册界面小窗口输入框

struct RegisterInput: View {
    @Binding var phoneNumberInput: String
    @Binding var passwordInput: String
    @Binding var passwordRepeat: String
    
    var body: some View {
        VStack() {
            TextField("手机号", text: $phoneNumberInput)
                // 输入设置
                .textContentType(.telephoneNumber)
                .keyboardType(.phonePad)
                .textInputAutocapitalization(.never)
                .autocorrectionDisabled()
                .font(.system(size: 20))
                // 外观设置
                .padding(.horizontal, 20)
                .padding(.vertical, 15)
                .overlay {
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color.gray, lineWidth: 1)
                }
            
            SecureField("密码", text: $passwordInput)
                // 输入设置
                .textContentType(.password)
                .textInputAutocapitalization(.never)
                .autocorrectionDisabled()
                .font(.system(size: 20))
                // 外观设置
                .padding(.horizontal, 20)
                .padding(.vertical, 15)
                .overlay {
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color.gray, lineWidth: 1)
                }
            
            SecureField("再次输入密码密码", text: $passwordRepeat)
                // 输入设置
                .textContentType(.password)
                .textInputAutocapitalization(.never)
                .autocorrectionDisabled()
                .font(.system(size: 20))
                // 外观设置
                .padding(.horizontal, 20)
                .padding(.vertical, 15)
                .overlay {
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color.gray, lineWidth: 1)
                }
        }
        .padding(.horizontal)
        .onChange(of: phoneNumberInput) {
            if (phoneNumberInput.count > 11) {
                let indexStart = phoneNumberInput.startIndex
                let indexEnd = phoneNumberInput.index(indexStart, offsetBy: 11)
                phoneNumberInput = String(phoneNumberInput[indexStart..<indexEnd])
            }
        }
    }
}

#Preview {
    @State var phoneNumberInput: String = ""
    @State var passwordInput: String = ""
    @State var passwordRepeat: String = ""
    
    return RegisterInput(phoneNumberInput: $phoneNumberInput,
                         passwordInput: $passwordInput,
                         passwordRepeat: $passwordRepeat)
}
